<template>
  <nav-bar />
  <canvas id="canvas"></canvas>
  <div class="container">
    <div class="img">
      <div class="tip">
        <!-- <text>沐歌</text> -->
        <div class="name">
          <CurrentYear font-size="17" title="扫码添加哦~" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue'
  import NavBar from '@comp/Navbar/Navbar.vue'
  import { galaxy } from '../../utils/animation'
  import CurrentYear from '@comp/CurrentYear/CurrentYear.vue'
  onMounted(() => galaxy())
</script>
<style lang="scss" scoped>
  // 动画
  $img-size: 180px;
  @-webkit-keyframes swing {
    0% {
      -webkit-transform: translateX(-50%) rotate(10deg);
      transform: translateX(-50%) rotate(10deg);
    }

    50% {
      -webkit-transform: translateX(-50%) rotate(-10deg) skewX(5deg) skewY(-2deg) scale(1.1);
      transform: translateX(-50%) rotate(-10deg) skewX(5deg) skewY(-2deg) scale(1.1);
    }

    100% {
      -webkit-transform: translateX(-50%) rotate(10deg);
      transform: translateX(-50%) rotate(10deg);
    }
  }

  @keyframes swing {
    0% {
      -webkit-transform: translateX(-50%) rotate(10deg);
      transform: translateX(-50%) rotate(10deg);
    }

    50% {
      -webkit-transform: translateX(-50%) rotate(-10deg) skewX(5deg) skewY(-2deg) scale(1.1);
      transform: translateX(-50%) rotate(-10deg) skewX(5deg) skewY(-2deg) scale(1.1);
    }

    100% {
      -webkit-transform: translateX(-50%) rotate(10deg);
      transform: translateX(-50%) rotate(10deg);
    }
  }

  .container {
    height: calc(100vh - #{$nav-height});
    width: 100vw;
    border-top: 5px solid #000;
    background-color: #2c2c35;
  }

  .img {
    height: $img-size;
    width: $img-size;
    background: url(../../assets/img/contact/webchat.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 8em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-style: solid;
    // border-color: #fff;
    border-width: 0 0 2.5em;
    -webkit-animation: swing 3.5s ease-in-out forwards infinite;
    animation: swing 3.5s ease-in-out forwards infinite;
    -webkit-transform-origin: 50% -10em;
    transform-origin: 50% -10em;
    background-color: red;

    .tip {
      position: relative;
      height: 100%;
      width: 100%;

      > text {
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translateX(-50%);
        color: red;
        font-size: 16px;
        font-weight: 600;
      }

      .name {
        position: absolute;
        bottom: -17px;
        right: 90px;
        color: brown;
      }
    }
  }

  .img::before,
  .img::after {
    content: '';
    position: absolute;
    bottom: 100%;
    height: 10em;
    width: 0.2em;
    background-color: #161b24;
  }

  .img::before {
    -webkit-transform: skew(3deg);
    transform: skew(3deg);
    left: 0.5em;
  }

  .img::after {
    -webkit-transform: skew(-3deg);
    transform: skew(-3deg);
    right: 0.5em;
  }
</style>
